<template>
    <div>
        <div class="pad_20 flex ba_f">
            <div class="fon_12 mar_r10 color_9">
                <span class="fon_14 color_3">时间筛选：</span>
                <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy年MM月dd日"
                        class="mar_l10"
                        @change="changeTime">
                </el-date-picker>
            </div>
        </div>
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>交易概况</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">支付金额</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayPayMoney || 0}}</p>
                            <p class="fon_12 title6 lh25">较前一日：{{jyData.newPayMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">支付金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">支付订单数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayPayNum || 0}}</p>
                            <p class="fon_12 title6 lh25">较前一日：{{jyData.newPayNum || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">支付订单数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">支付人数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.dayUserCount || 0}}</p>
                            <p class="fon_12 title6 lh25">较前一日：{{jyData.newUserCount || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">支付人数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">客单价</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayPrice || 0}}</p>
                            <p class="fon_12 title6 lh25">较前一日：{{jyData.newPrice || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">客单价</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">下单转化率</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayConver || 0}}</p>
                            <p class="fon_12 title6 lh25">较前一日：{{jyData.newConver || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">下单人数/访问人数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div id="zhentiEch" style="height: 360px;" class="mar_t40"></div>
        </div>
        <div class="mar_t20 ba_f outmain pad_20 ">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>浏览概况</span>
                </div>
            </div>
            <div class="flex-bet">
                <div class="bflex-7 outmain" style="height: 390px;">
                    <div id="mainEch" style="height:360px"></div>
                </div>
                <div class="bflex-3">
                    <div class="bortColor flex-bet pad_20 flex-y-top">
                        <div>
                            <p class="title6 fon_14">浏览量(pv)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.visitCount || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">昨日 {{jyData.yesVisitCount || 0}}</p>
                                <p class="fon_12 title6 lh25 mar_l20">全部 {{jyData.visitTotal || 0}}</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">浏览量</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="bortColor flex-bet pad_20 flex-y-top mar_t20">
                        <div>
                            <p class="title6 fon_14">访客数(uv)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.userCount || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">昨日 {{jyData.yesUserCount || 0}}</p>
                                <p class="fon_12 title6 lh25 mar_l20">全部 {{jyData.UserTotal || 0}}</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">访客数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {realAnalysis} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    import {mapState} from 'vuex'
    export default {
        mounted() {
            // this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                value: '',
                form: {
                    shopValue: '',
                    timeType: '1',
                    time: [new Date(),new Date()],
                    Mtime: '',
                },
                options: [{
                    value: '1',
                    label: '全部'
                }],
                options2: [{
                    value: '1',
                    label: '自然日'
                }, {
                    value: '2',
                    label: '自然月'
                }],
                jyData:{
                    todayPayMoney:'',
                    newPayMoney:'',
                    todayPayNum:'',
                    newPayNum:'',
                    dayUserCount:'',
                    newUserCount:'',
                    todayPrice:'',
                    newPrice:'',
                    todayConver:'',
                    newConver:'',
                    visitCount:'',
                    yesVisitCount:'',
                    visitTotal:'',
                    userCount:'',
                    yesUserCount:'',
                    UserTotal:'',
                },
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['支付金额', '支付订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '支付金额',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 32, 25, 15, 40, 15, 20, 10, 22, 30, 25,]
                        },
                        {
                            name: '支付订单数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [80, 22, 20, 10, 25, 35, 20, 10, 64, 20, 90,]
                        }
                    ]
                },
                echarts1_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['浏览量', '访客数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '浏览量',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },
                        {
                            name: '访客数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
                        }
                    ]
                },
            }
        },
        // created() {
        //     this.form.shopValue = this.market[0].id
        //     this.options = this.market
        // },
        computed:{
            ...mapState(['storeId'])
        },
        methods: {
            init() {
                this.realAnalysis()
            },
            async realAnalysis() {
                let startTime = '';
                let endTime = '';
                if(this.form.time){
                    startTime  = changeDate(this.form.time[0]);
                    endTime = changeDate(this.form.time[1]);
                }
                var params = {
                    startTime,
                    endTime,
                    storeId: this.storeId,
                }
                const {data} = await realAnalysis(params);
                // console.log(data)
                if (data) {
                    this.jyData.todayPayMoney = data.todayPayMoney?data.todayPayMoney:0
                    this.jyData.newPayMoney = data.newPayMoney?data.newPayMoney:0
                    this.jyData.todayPayNum = data.todayPayNum?data.todayPayNum:0
                    this.jyData.newPayNum = data.newPayNum?data.newPayNum:0
                    this.jyData.dayUserCount = data.dayUserCount?data.dayUserCount:0
                    this.jyData.newUserCount = data.newUserCount?data.newUserCount:0
                    this.jyData.todayPrice = data.todayPrice?data.todayPrice:0
                    this.jyData.newPrice = data.newPrice?data.newPrice:0
                    this.jyData.todayConver = data.todayConver?data.todayConver:0
                    this.jyData.newConver = data.newConver?data.newConver:0
                    this.jyData.visitCount = data.visitCount?data.visitCount:0
                    this.jyData.yesVisitCount = data.yesVisitCount?data.yesVisitCount:0
                    this.jyData.visitTotal = data.visitTotal?data.visitTotal:0
                    this.jyData.userCount = data.userCount?data.userCount:0
                    this.jyData.yesUserCount = data.yesUserCount?data.yesUserCount:0
                    this.jyData.UserTotal = data.UserTotal?data.UserTotal:0

                    this.echarts2_option.series[0].data = data.payMoneyArr.map(item => item.money);
                    this.echarts2_option.series[1].data = data.countArr.map(item => item.money);
                    this.echarts2_option.xAxis.data = data.payMoneyArr.map(item => item.hours);
                    this.zhentiEch()

                    this.echarts1_option.series[0].data = data.visitArr.map(item => item.money);
                    this.echarts1_option.series[1].data = data.userArr.map(item => item.money);
                    this.echarts1_option.xAxis.data = data.visitArr.map(item => item.hours);
                    this.init2()
                    this.bus.$emit('loading', false)
                }
            },
            zhentiEch() {
                let myChart = echarts.init(document.getElementById('zhentiEch'))
                myChart.setOption(this.echarts2_option, true)
            },
            init2() {
                // var echarts = require('echarts');
                let myChart = echarts.init(document.getElementById('mainEch'))
                myChart.setOption(this.echarts1_option, true)
            },
            changeTime(){
                this.getFinanceData()
            },
        }
    }
</script>
